1 00:00:00,280 --> 00:00:09,250 For this lecture, we're going to take a trip back to image labels and learn more about the slice scale 2 00:00:09,250 --> 00:00:09,970 type. 3 00:00:09,970 --> 00:00:16,870 I'm going to discuss with you something called nine slice design, which basically means that we slice 4 00:00:16,870 --> 00:00:19,570 an image into nine different zones. 5 00:00:19,570 --> 00:00:26,830 And these nine zones have their own aspect ratios, which allows us to scale an image across multiple 6 00:00:26,830 --> 00:00:31,120 different screen types and resolutions without distorting the image. 7 00:00:31,120 --> 00:00:37,960 As an example, with this image on the default stretch mode, if I were to resize my screen, for example, 8 00:00:37,960 --> 00:00:45,790 on the y axis, you will notice that these sections of my images, such as this recording section or 9 00:00:45,790 --> 00:00:48,670 this battery button here, are becoming distorted. 10 00:00:48,670 --> 00:00:51,190 They're being squished down on the y axis. 11 00:00:51,190 --> 00:00:53,200 Same thing goes with the x axis. 12 00:00:53,200 --> 00:00:58,480 If I were to move it this way, you're going to notice them squish along the x axis. 13 00:00:58,480 --> 00:01:00,550 Sometimes this isn't desired. 14 00:01:00,550 --> 00:01:06,910 Wouldn't it be better if we could have the corners of our image, have a different aspect ratios from 15 00:01:06,910 --> 00:01:08,530 the edges between them? 16 00:01:08,530 --> 00:01:12,070 Well, this is what nine slice design allows us to do. 17 00:01:12,610 --> 00:01:18,850 If we were to go and set the scale type to slice, we're going to notice is that the image right here 18 00:01:18,850 --> 00:01:21,430 is going to get put down in the bottom right of the screen. 19 00:01:21,430 --> 00:01:22,300 Don't worry about that. 20 00:01:22,300 --> 00:01:28,000 Because what we need to do is we need to open up these three dots relating to slice center. 21 00:01:28,610 --> 00:01:34,250 And you should get this little window that opens up showing your images with four different slidable 22 00:01:34,250 --> 00:01:35,030 bars. 23 00:01:35,060 --> 00:01:40,070 Now, what this is going to allow us to do is to define the different zones that are going to have different 24 00:01:40,070 --> 00:01:41,450 aspect ratios. 25 00:01:41,450 --> 00:01:44,330 So I'm going to slide this bottom one up. 26 00:01:44,330 --> 00:01:46,640 So that way it's above these bottom corners. 27 00:01:46,640 --> 00:01:49,580 Same thing with this top one I'm going to slide this one down. 28 00:01:49,580 --> 00:01:52,730 And then I'm going to make sure that they're roughly the same size. 29 00:01:52,730 --> 00:01:54,710 Or I want to make sure that they're the same size. 30 00:01:54,710 --> 00:01:58,430 So the top is going to be 180 pixels from the top. 31 00:01:58,430 --> 00:01:59,810 And then from the bottom. 32 00:01:59,810 --> 00:02:02,930 For this image it's going to be 180 pixels. 33 00:02:02,930 --> 00:02:07,760 And then for the sides we want to make sure we overlap our little icons on the side. 34 00:02:07,760 --> 00:02:10,310 So it seems like 200 pixels is good enough. 35 00:02:10,310 --> 00:02:13,070 And then for the left side we're going to do the exact same thing. 36 00:02:13,070 --> 00:02:15,800 We're going to do 200 pixels from the left side. 37 00:02:15,800 --> 00:02:18,470 Now we have nine different zones. 38 00:02:18,470 --> 00:02:21,470 We have one in this corner, this corner, this corner and this corner. 39 00:02:21,470 --> 00:02:23,480 We have them between the different corners. 40 00:02:23,480 --> 00:02:25,340 And then we have one in the center. 41 00:02:25,340 --> 00:02:31,700 Now each of these different zones has their own aspect ratios, which means if I were to go and resize 42 00:02:31,700 --> 00:02:38,000 the screen, what's going to happen is that these zones between the corners are going to resize while 43 00:02:38,000 --> 00:02:40,430 the corners are going to remain unaffected. 44 00:02:40,430 --> 00:02:44,360 This will allow us to avoid that squish we just saw earlier. 45 00:02:44,360 --> 00:02:49,700 So for example, if I resize on the y axis, what do you notice? 46 00:02:49,700 --> 00:02:54,020 Our battery and our recording text did not squish, which is very cool. 47 00:02:54,020 --> 00:02:56,930 Same thing goes with our corners. 48 00:02:56,930 --> 00:02:59,600 You will notice that they remain the exact same size. 49 00:02:59,600 --> 00:03:01,730 They're the exact same aspect ratio. 50 00:03:02,150 --> 00:03:08,390 Now if I do the same thing on the x axis, if I scroll in that way, what will you notice? 51 00:03:08,390 --> 00:03:13,310 Well, hey, they didn't squish along the x axis, which is very cool. 52 00:03:13,870 --> 00:03:17,530 So this is the whole principle with nine slice design. 53 00:03:17,530 --> 00:03:20,980 The purpose is for you to put an image into your image label. 54 00:03:20,980 --> 00:03:25,780 Maybe it's an outline of an image with some cool design effects on the edges, and you want to make 55 00:03:25,780 --> 00:03:29,830 sure that you keep the edges the same aspect ratio we'll have. 56 00:03:29,830 --> 00:03:35,710 The borders between them change depending on the resolution and the scaling of the screen. 57 00:03:35,710 --> 00:03:39,310 And that's all we do with this slice scale type. 58 00:03:39,310 --> 00:03:44,110 We just open this up, adjust the lines to where we need it, and we're done. 59 00:03:44,110 --> 00:03:48,640 So I hope you found this lecture helpful and I will see you in the next one.